03
Interaction Design
IXD 5106 - Fall 2023
INTRODUCTION TO:
WEEK 03
WEEK THREE
TODAY’S
AGENDA
01.
02.
04.
PROTOTYPING
IXD DESIGN PATTERNS
IN CLASS ACTIVITY
& Designing for Mobile
03.
VISUAL DESIGN &INTERFACE ELEMENTS
Building designs for your target user
SAT/UNSAT #2 – COPYCAT
Design Principals & Characteristics
03
Wireframing, sometimes known as a "screen blueprint," is a way toprototype, test, and design systems (typically websites/apps) at astructural and skeletal level - while taking into account user needs.
It's a 2D design in the early stages of development meant tohelp create layouts, compositions and basic structure ofsomething before the visual design and content are added.
WIREFRAMING
01
WHEN & WHY DO YOU WIREFRAME?
The process takes place during the exploratory phase of the productlife cycle. Great for when you are:
Because they:
TYPES OF WIREFRAMES
03
Prototyping is a scaled-down version of your product, a “sample version“that allows you to test your ideas and designs before investing more timeand money into full production of the product.
Prototypes help gain insight into the interactions users willtake and react to, identify flaws or usability issues early onand aid in making informed decisions about design, layoutand features of your designs.
PROTOTYPING
02
TYPES OF PROTOTYPES
NOTE:
Visual design elements are fundamental to creating appealing andeffective visual compositions. They are combined and manipulated toconvey information, evoke emotions, establish brand identity, andguide the viewer's attention in a design.
Each element is critical in shaping a visual piece'soverall aesthetics and user experience.
VISUAL DESIGN ELEMENTS
03
VISUAL
DESIGN
ELEMENTS
GESTALTPRINCIPLES
TYPOGRAPHY
COLOUR
TUBIKSTUDIO.COM
– Wassily Kandinsky
“COLOUR IS A POWERWHICH DIRECTLYINFLUENCES THE SOUL.”
VISUALLY APPEALING UI
MOBILE UI
THINGS TO
LOOK OUT
FOR:
INTERACTIVE
ELEMENTS
03
BREAK TIME!
A button is a fundamental UI element that will heavily affect your interactiondesign. Buttons have the power to compel users to convert, to carry out anaction. Buttons are a middleman between the user and the product and arecharged with keeping the conversation between person and machine going.
BUTTONS
RULES TO BUTTON DESIGN
Menus are lists of content categories or features, typically presented as a setof links or icons grouped together with visual styling distinct from the rest ofthe design.
MENUS
Navigation design is the discipline of creating,analyzing and implementing ways for users tonavigate through a website or app.
Navigation plays an integral role in how usersinteract with and use your products. It is howyour user can get from point A to point B andeven point C in the least frustrating waypossible.
NAVIGATION DESIGN
HAMBURGERMENUS
TABS
VERTICAL NAVIGATION MENUS
SLIDERS
Sliders are frequently used in user interfaces to allow users to pick a valueor range from a set of predefined options. In real-world usage, sliders canbe tricky to handle. This is especially true on touch-based interfaces,where achieving precise control to finely adjust a slider to a specific valueis often impractical.
CAROUSEL
Carousels allow multiple pieces ofcontent to occupy a single, covetedspace In other words, it is a slideshowof images or content that rotatesautomatically or with user interaction.Carousels are often used to showcasemultiple pieces of content within alimited space, such as on a website'shomepage or a product page.
WHEN ARE CAROUSELS USED?
BEST PRACTICES FOR CAROUSELS
Variants allow you to create multiple versions of acomponent with different property values (e.g., text, colour,or layout) and switch between them easily. This can helpstreamline the design process and make it more efficient.
Variables allow us to create, store and use reusable valueslike text strings or colours throughout Figma. BUT! Variablescan only support one raw value - so you will still want touse styles when referencing multiple values at once.
VARIABLES
VARIABLE TYPES
Within Figma today, four types of variables are supported: colour,number, boolean, and string types.
Colour: refers to any variable that supports a colour definition, and this can beapplied to either the fill or stroke
Number: these are used to assign a numerical value to a variable definition.Once created, these types can be applied to text layers, corner radius values,min and max widths or heights, and padding or gap spacing values.
TYPES OF VARABLES CONT.
Boolean: allows us to assign booleans (true or false statements) to a variable withthe starting value as the default value when created.
Ex. Boolean variables allow for the control of layer visibility, such as the ability tochoose to display an image or container when within desktop-sized layouts but tohide it when designing for mobile.
String: allows for creating specific strings of characters to be made and usedthroughout components and within designs. This variable type can be applied toany text layer.
DESIGN SYSTEMS
It is the entire product ecosystem. A design system communicates the“what,” the “how,” and the “why.”
Style Guides: set the standards defining the elements' appearance and theoverall voice and tone. The visual language of look and feel.
Component Libraries: contain the building blocks of a product. They focus onhow assets should behave in the product.
DESIGN SYSTEM BENEFITS:
IN CLASS ASSIGNMENT:
SAT/UNSAT - 5% - FIGMA COPYCAT
The purpose of this assignment is for you to explore Figma and learn its differentfeatures. This assignment will allow me to see how comfortable you are using Figmaand your strengths. You will recreate the provided landing page (available onBlackboard) in a wireframe and mid-fidelity format. If you feel confident enough, youcan even create a High-Fidelity Prototype of the landing page (this is not mandatory;this is simply if you want to take on the challenge). Please remember that you don’tneed to find the exact logo, images and fonts used in the example.
FirstName_LastName_IXD5106(Section Letter)_Assignment#
Due September 27 by 11:59 pm.
LETS JUMP
INTO FIGMA!
03
Interaction Design
IXD 5106 - Fall 2023
INTRODUCTION TO:
WEEK 03